let oSliderBox = document.getElementById('sliderBox1')
/* 获取ul li */
let oSliderUl = document.querySelector('.sliderUl');
let aSliderList = oSliderUl.children;
/* 获取轮播区块宽度 */
let perWidth = aSliderList[0].offsetWidth;
/* 设置ul的宽度 */
oSliderUl.style.width = aSliderList.length * perWidth + 'px';
/* 加定时器 */
let i = 0;

/* 做一个封装 */
function move() {
    i++;
    //临界值 避免出现空白
    if (i == aSliderList.length) {
        oSliderUl.style.left = 0;
        i = 1;
    }
    /* 右箭头临界值 */
    if (i == -1) {
        oSliderUl.style.left = -(aSliderList.length - 1) * perWidth + 'px';
        i = aSliderList.length - 2;
    };

    /* 小圆点点亮 */
    /* 避免都点亮，先清除后加 */
    for (let j = 0; j < aCircleList.length; j++) {
        aCircleList[j].className = "";
    };
    /*出现最后一张图 */
    if (i == aSliderList.length - 1) {
        aCircleList[0].className = 'hover';
    } else {
        aCircleList[i].className = 'hover';
    };

    /* 往左走是负 */
    startMove(oSliderUl, {
        left: -perWidth * i
    });
};

let timer = setInterval(function () {
    move();
}, 2000);

/* 获取箭头 */
let oBtn = document.querySelector('.btns');
/* 给获取到的左箭头取个名字 */
let lArrow = oBtn.children[0];
/* 右箭头 */
let rArrow = oBtn.children[1];
/* 添加左箭头单击事件 */
lArrow.onclick = function () {
    /* 不能用i-- 应为上面是i++会抵消 */
    i -= 2;
    move();
};
/* 右箭头事件  依然还要临界值*/
rArrow.onclick = function () {
    move();
};

/* 获取小圆点 */
let oCircle = document.querySelector('.circles');
let aCircleList = oCircle.children;
for (let j = 0; j < aCircleList.length; j++) {
    aCircleList[j].onmouseover = function () {
        i = j - 1;
        move();
    };
};

/* 清除和开启定时器 */
/* 清除 */
oSliderBox.onmouseover = function () {
    clearInterval(timer);
};
/* 开启 */
oSliderBox.onmouseout = function () {
    timer = setInterval(function () {
        move();
    }, 2000);
};